package com.example.jetpackcomposebasic01

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcomposebasic01.ui.theme.Dn_LearningTheme

/**
 * 动脑学院-compose 学习
 *
 * 07-列表与状态
 * https://www.bilibili.com/video/BV1ob4y1a7ad?p=7&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
 *
 *
 * 1. LazyColumn - 就是列表，相当于  ListView/RecyclerView
 *
 * 2. remember 是  @Composable 注解修饰函数用来存储临时变量的值，就是某些值，不希望  @Composable 函数重新
 * 调用的时候，值被重新初始化，则使用 remember 开辟一个空间来存储。
 *  @Composable 函数跟普通函数一样，被调用了，局部变量就重新初始化一次了
 *  但是在列表上，列表移出屏幕，再次回来依旧不会保存状态
 *   var isExpanded by remember {
 *        mutableStateOf(false)
 *   }
 *
 * 3.
 *   // 将颜色转为状态(需要配合 Surface 使用)
 *   val surfaceColor: Color by animateColorAsState(
 *      targetValue = if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface,
 *      label = ""
 *   )
 *
 *
 * 4.
 *  Surface(
 *                     color = surfaceColor,
 *                     shape = MaterialTheme.shapes.medium, // 设置圆角
 *                     shadowElevation = 1.dp, // 设置阴影的海拔值
 *                     modifier = Modifier
 *                         .animateContentSize() // 让 Surface 包裹下的控件由小到大变化展示
 *                         .padding(1.dp)
 *                 )
 */
class MainActivity05 : ComponentActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Dn_LearningTheme {
                Conversation(SampleData.conversationSample)
            }
        }

    }

    @Composable
    fun MessageCard(msg: Message) {
        /*
            Row : 水平布局，类似 LinearLayout 的 LinearLayout.HORIZONTAL 形式
            Colum : 垂直布局，类似 LinearLayout 的 LinearLayout.VERTICAL 形式
         */

        Row(
            modifier = Modifier
                .padding(8.dp)
                .background(
                    color = MaterialTheme.colorScheme.background
                )
        ) {
            Image(
                painter = painterResource(id = R.drawable.girl), // 加载本地图片
                contentDescription = null, // 无障碍模式的时候的提示文案
                contentScale = ContentScale.Crop, // 图片的缩放模式
                modifier = Modifier
                    .size(44.dp, 44.dp)
                    .clip(CircleShape) // 设置裁剪图片，这里是裁剪成圆形
            )
            Spacer(modifier = Modifier.width(8.dp))


            var isExpanded by remember {
                mutableStateOf(false)
            }

            // 将颜色转为状态(需要配合 Surface 使用)
            val surfaceColor: Color by animateColorAsState(
                targetValue = if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface,
                label = ""
            )


            Column(
                modifier = Modifier.clickable { // 这里设置了点击
                    isExpanded = !isExpanded
                }
            ) {
                Text(text = msg.auth, color = MaterialTheme.colorScheme.secondary)
                Spacer(modifier = Modifier.height(4.dp))
                Surface(
                    color = surfaceColor,
                    shape = MaterialTheme.shapes.medium, // 设置圆角
                    shadowElevation = 1.dp, // 设置阴影的海拔值
                    modifier = Modifier
                        .animateContentSize() // 让 Surface 包裹下的控件由小到大变化展示
                        .padding(1.dp)
                ) {
                    Text(
                        text = msg.body,
                        modifier = Modifier.padding(all = 4.dp),
                        style = MaterialTheme.typography.bodyMedium,
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    )
                }
            }
        }
    }

    @Preview
    @Composable
    fun PreviewMessageCard() {
        MessageCard(
            msg = Message(
                auth = "tianshen",
                body = "龙神",
            )
        )
    }


    @Composable
    fun Conversation(messages: List<Message>) {
        LazyColumn(content = {
            items(messages) {
                MessageCard(msg = it)
            }
        })

    }


    data class Message(val auth: String, val body: String)
}

